<template>
  <NavBarVue title="个性标签"/>
  <view class="label">
    <view class="top">
      <view class="top_h1">选择兴趣标签</view>
      <view class="top_p">优先推送符合以下兴标签内容</view>
    </view>
    <view class="labs">
      <view class="labs_details" v-for="(value, keyName) in tagLibraryStore.contentTagList.userList" :key="keyName">
        <view class="h2">
          {{keyName}}
        </view>
        <view class="labs_ul">
          <view class="labs_li" v-for="(val,index2) in value" :key="index2"
                :class="{active: val.tagLibraryBO.userSelected}"
                @click="click(keyName,index2)">
            {{val?.tagLibraryBO?.tagName}}
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <button class="btn" @click="complete">完成</button>
    </view>
    <TabBarVue/>
  </view>
</template>

<script setup>
import TabBarVue from "../../../components/TabBar.vue";
import NavBarVue from "../../../components/NavBar.vue";
import {
  onMounted,
  reactive,
  ref
} from "vue"
import {
  useTagLibraryStore
} from '../../../store'

const tagLibraryStore = useTagLibraryStore()

let activeList = reactive({})
// 点击高亮
const click = (keyName, idx) => {
  tagLibraryStore.contentTagList.userList[keyName][idx].tagLibraryBO.userSelected = !tagLibraryStore.contentTagList.userList[keyName][idx].tagLibraryBO.userSelected
}
onMounted(async () => {
  await tagLibraryStore.userList()
  await tagLibraryStore.articleList()
})

// 完成
const complete = async () => {
  const userList = tagLibraryStore.contentTagList.userList
  const tagIds = Object.keys(userList).reduce((prev, keyName) => {
    return prev.concat(userList[keyName].filter((v) => v.tagLibraryBO.userSelected))
  }, []).map(v => v.tagLibraryBO.id).join(',')
  const res = await tagLibraryStore.userTag({
    tagIds
  })
  uni.showModal({
    content: "保存成功",
    showCancel: false,
    success() {
      uni.switchTab({
        url: "/pages/tab-index/index"
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.label {

  .top {
    .top_h1 {
      color: rgb(254, 84, 107);
      font-size: 40rpx;
      font-weight: bold;
      padding: 30rpx 20rpx 10rpx;


    }

    .top_p {
      color: #aaa;
      font-size: 24rpx;
      padding: 10rpx 20rpx 30rpx;

    }

    border-bottom: 1px solid #eee;
  }

  .labs {
    padding: 0rpx 20rpx 252rpx;
    // font-family: "宋体";
    .h2 {
      font-weight: bold;
      padding: 50rpx 20rpx 0rpx;
      font-size: 30rpx;

    }

    .labs_ul {
      display: flex;
      flex-wrap: wrap;
      color: #aaa;
      font-size: 30rpx;
      margin-top: 20rpx;

      .labs_li {
        background-color: rgb(247, 247, 247);
        padding: 18rpx 25rpx;
        margin: 12rpx;
      }

      .active {
        color: white;
        background-color: rgb(254, 84, 107);
      }
    }
  }

  .bottom {
    width: 100vw;
    padding: 0rpx 20rpx;
    position: fixed;
    bottom: 80px;
    left: 0rpx;
    box-sizing: border-box;

    .btn {
      background-color: rgb(254, 84, 107);
      color: white;
      padding: 0rpx;
    }
  }
}
</style>